<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>transition-timing-function 各项属性值的效果</title>
		<style>
			div {
				width: 100px;
				height: 50px;
				margin: 10px;
				color: white;
				font-weight: bold;
				transition: width 2s, height 2s;
				/* -webkit-transition: width 2s, height 2s; */
				/* Safari */
			}
			#div1 {
				transition-timing-function: linear;
			}
			#div2 {
				transition-timing-function: ease;
			}
			#div3 {
				transition-timing-function: ease-in;
			}
			#div4 {
				transition-timing-function: ease-out;
			}
			#div5 {
				transition-timing-function: ease-in-out;
			}

			/* Safari */
			/* #div1 {
				-webkit-transition-timing-function: linear;
			}
			#div2 {
				-webkit-transition-timing-function: ease;
			}
			#div3 {
				-webkit-transition-timing-function: ease-in;
			}
			#div4 {
				-webkit-transition-timing-function: ease-out;
			}
			#div5 {
				-webkit-transition-timing-function: ease-in-out;
			} */
			div:hover {
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		

		<div id="div1" style="background: red;">linear</div>
		<div id="div2" style=" background: blue;">ease</div>
		<div id="div3" style=" background: green;">ease-in</div>
		<div id="div4" style=" background: gray;">ease-out</div>
		<div id="div5" style=" background: pink;">ease-in-out</div>

		<p>将鼠标移动至块上查看过渡动画效果.</p>
	</body>
</html>
